<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>习惯打卡 - 嘀嗒</title>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <script>
        tailwind.config = {
            // darkMode: 'class', // Disable dark mode by default
            theme: {
                extend: {
                    colors: {
                        'primary': '#10B981',
                        'primary-focus': '#059669',
                        'secondary': '#6366F1',
                        'accent': '#EC4899',
                        'base-100-light': '#FFFFFF',
                        'base-content-light': '#1F2937',
                        'neutral-light': '#F3F4F6', // gray-100 for card backgrounds
                        'text-muted-light': '#6B7280', // gray-500
                        'border-light': '#E5E7EB' // gray-200 for borders
                    }
                }
            }
        }
    </script>
    <style>
        body {
            background-color: #FFFFFF; /* base-100-light */
            color: #1F2937; /* base-content-light */
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            display: flex;
            flex-direction: column;
            height: 100vh; /* Full viewport height for iframe */
        }
        .habit-item.completed .fa-circle-check {
            color: #10B981; /* primary color */
        }
        .habit-item.pending .fa-circle {
            color: #9CA3AF; /* Gray-400 for light theme pending */
        }
        .bottom-nav {
            border-top: 1px solid #E5E7EB; /* border-light */
        }
        .nav-item.active i, .nav-item.active span {
            color: #10B981; /* primary color */
        }
    </style>
</head>
<body class="antialiased flex flex-col bg-base-100-light text-base-content-light">

    <header class="p-4 sticky top-0 bg-base-100-light z-10 shadow-sm border-b border-border-light">
        <div class="flex justify-between items-center">
            <h1 class="text-xl font-semibold text-base-content-light">早上好, Jason!</h1>
            <div>
                <button class="text-text-muted-light hover:text-primary">
                    <i class="fas fa-search"></i>
                </button>
                <button class="ml-3 text-text-muted-light hover:text-primary" onclick="document.location.href='settings.html'">
                    <i class="fas fa-cog"></i>
                </button>
            </div>
        </div>
    </header>

    <main class="flex-grow p-4 overflow-y-auto">
        <div class="mb-6">
            <h2 class="text-lg font-medium text-text-muted-light mb-3">今日习惯</h2>
            <div class="space-y-3">
                <!-- Habit Item 1: Completed -->
                <div class="habit-item completed bg-neutral-light p-4 rounded-lg flex items-center justify-between shadow">
                    <div class="flex items-center">
                        <i class="fas fa-mug-hot text-2xl text-orange-500 mr-4"></i>
                        <div>
                            <h3 class="font-semibold text-base-content-light">早起喝杯温水</h3>
                            <p class="text-sm text-text-muted-light">已坚持 <span class="text-primary font-medium">25</span> 天</p>
                        </div>
                    </div>
                    <button class="text-2xl">
                        <i class="fas fa-circle-check"></i>
                    </button>
                </div>

                <!-- Habit Item 2: Pending -->
                <div class="habit-item pending bg-neutral-light p-4 rounded-lg flex items-center justify-between shadow">
                    <div class="flex items-center">
                        <i class="fas fa-book-open text-2xl text-blue-500 mr-4"></i>
                        <div>
                            <h3 class="font-semibold text-base-content-light">阅读30分钟</h3>
                            <p class="text-sm text-text-muted-light">已坚持 <span class="text-primary font-medium">10</span> 天</p>
                        </div>
                    </div>
                    <button class="text-2xl">
                        <i class="far fa-circle"></i>
                    </button>
                </div>

                <!-- Habit Item 3: Pending with goal -->
                <div class="habit-item pending bg-neutral-light p-4 rounded-lg flex items-center justify-between shadow">
                    <div class="flex items-center">
                        <i class="fas fa-person-running text-2xl text-green-500 mr-4"></i>
                        <div>
                            <h3 class="font-semibold text-base-content-light">跑步3公里</h3>
                            <p class="text-sm text-text-muted-light">目标: 3公里, 今日: 0/3</p>
                        </div>
                    </div>
                    <button class="text-2xl">
                        <i class="far fa-circle"></i>
                    </button>
                </div>
                 <!-- Image from Pexels: https://www.pexels.com/photo/person-holding-a-clear-glass-bottle-with-water-416528/ -->
                 <img src="https://images.pexels.com/photos/416528/pexels-photo-416528.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Water bottle" class="w-full h-32 object-cover rounded-lg mt-4 opacity-75">
            </div>
        </div>

        <div class="fixed bottom-16 right-4 z-20">
             <button onclick="document.location.href='habit_create.html'" class="bg-primary hover:bg-primary-focus text-white font-bold w-14 h-14 rounded-full flex items-center justify-center shadow-lg">
                <i class="fas fa-plus text-xl"></i>
            </button>
        </div>
    </main>

    <nav class="bottom-nav bg-base-100-light p-3 flex justify-around items-center sticky bottom-0 z-10 border-t border-border-light">
        <a href="home_habits.html" class="nav-item active flex flex-col items-center text-text-muted-light hover:text-primary">
            <i class="fas fa-check-double text-xl"></i>
            <span class="text-xs mt-1">习惯</span>
        </a>
        <a href="home_todos.html" class="nav-item flex flex-col items-center text-text-muted-light hover:text-primary">
            <i class="fas fa-list-ul text-xl"></i>
            <span class="text-xs mt-1">待办</span>
        </a>
        <a href="home_finance.html" class="nav-item flex flex-col items-center text-text-muted-light hover:text-primary">
            <i class="fas fa-wallet text-xl"></i>
            <span class="text-xs mt-1">财务</span>
        </a>
        <a href="home_stats.html" class="nav-item flex flex-col items-center text-text-muted-light hover:text-primary">
            <i class="fas fa-chart-line text-xl"></i>
            <span class="text-xs mt-1">统计</span>
        </a>
    </nav>

</body>
</html>